<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>试题</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1754034_zm5tadrfja9.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .v-expansion-panel:before {
            box-shadow: none;
        }

        .theme--light.v-expansion-panels .v-expansion-panel {
            background-color: transparent;
        }

        .padding10 {
            padding: 10px 0;
        }
    </style>
</head>

<body>

    <!--vue 绑定和Django的jinja2模板系统使用的标签是一样的，为了区分我们需要用verbatim将vue的标签包围起来-->
    {% verbatim myblock %}
    <div id="app">
        <v-app>
            <template>
                <div>
                    <v-app-bar color="#00ade3" dense dark absolute id="header">
                        <v-app-bar-nav-icon @click="drawer = true"> <i style="font-size: 20px;"
                                class="icon iconfont iconzhihuitiku"></i>
                        </v-app-bar-nav-icon>
                        <v-toolbar-title>Exam</v-toolbar-title>
                        <v-spacer></v-spacer>
                        <v-btn icon>
                            <a href="/temp/upload" style="text-decoration: none;">
                                <i style="color: #fff;font-size: 18px;" class=" icon iconfont iconshangchuan"></i>
                            </a>
                        </v-btn>
                        <v-menu left bottom>
                            <template v-slot:activator="{ on }">
                                <v-btn icon v-on="on">
                                    <i style="color: #fff;font-size: 18px;" class="icon iconfont iconchakan"></i>
                                </v-btn>
                            </template>

                            <v-list>
                                <v-list-item>
                                    <v-list-item-title> <a href="/temp/exam" style="text-decoration: none;">
                                            查看全部
                                        </a></v-list-item-title>
                                </v-list-item>
                                <v-list-item>
                                    <v-list-item-title> <a href="/temp/examPage" style="text-decoration: none;">
                                            分页查看
                                        </a></v-list-item-title>
                                </v-list-item>
                                <v-list-item>
                                    <v-list-item-title> <a href="/temp/examAjax" style="text-decoration: none;">
                                            Ajax查看
                                        </a></v-list-item-title>
                                </v-list-item>
                            </v-list>
                        </v-menu>


                    </v-app-bar>
                    <v-navigation-drawer v-model="drawer" absolute temporary>
                        <v-list nav dense>
                            <v-subheader>目录</v-subheader>
                            <v-list-item-group v-model="type" active-class="deep-purple--text text--accent-4">
                                <v-list-item v-for="(item, i) in typeList" :key="i">
                                    <v-list-item-title @click="changeType(item.fields.type)">{{ item.fields.type }}
                                    </v-list-item-title>
                                </v-list-item>
                            </v-list-item-group>
                        </v-list>
                    </v-navigation-drawer>
                    <v-sheet id="scrolling-techniques-7" ref="scrollTopList" class="overflow-y-auto" :height="height">
                        <v-container>
                            <v-list>
                                <v-list-item-group color="primary">
                                    <v-list-item v-for="(item, i) in result" :key="i">
                                        <v-list-item-content>
                                            <v-list-item three-line>
                                                {{ i+1 }}. {{item.title}}
                                            </v-list-item>
                                            <v-list-item-subtitle>
                                                <v-radio-group>
                                                    <v-radio :label="'A.'+ item.a_key"></v-radio>
                                                    <v-radio :label="'B.'+ item.b_key"></v-radio>
                                                    <v-radio :label="'C. '+item.c_key"></v-radio>
                                                    <v-radio :label="'D. '+item.d_key"></v-radio>
                                                </v-radio-group>
                                            </v-list-item-subtitle>
                                            <v-row justify="center">
                                                <v-expansion-panels>
                                                    <v-expansion-panel>
                                                        <v-expansion-panel-header>答案及解析</v-expansion-panel-header>
                                                        <v-expansion-panel-content>
                                                            <h5>解析</h5>
                                                            <p class="padding10"> {{ item.answer}}</p>
                                                            <h5>答案</h5>
                                                            <p class="padding10"> {{ item.resolve}}</p>
                                                        </v-expansion-panel-content>
                                                    </v-expansion-panel>
                                                </v-expansion-panels>
                                            </v-row>
                                        </v-list-item-content>
                                    </v-list-item>
                                    <!--Vuetify 加载动画-->
                                    <p v-if="loading" class="loading pa-0">
                                        <v-progress-linear value="1" color="indigo lighten-4" buffer-value="100"
                                            height="25" background-opacity="0.10" indeterminate rounded
                                            class="ma-0 pa-0 font-weight-bold">加载中
                                        </v-progress-linear>
                                    </p>
                                </v-list-item-group>
                            </v-list>
                        </v-container>
                    </v-sheet>


                </div>
            </template>
        </v-app>
    </div>
    {% endverbatim myblock %}





    <script type="text/javascript">

    </script>
    <script>
        var vs = new Vue({
            el: '#app',
            vuetify: new Vuetify(),
            data() {
                return {
                    result: [],
                    typeList: null,
                    type: 0,
                    typeName: '',
                    drawer: false,
                    page: 1, //当前页
                    time: '', //用于延时加载效果
                    totalnum: 0, //总页数
                    num: 0, //数组下标计数
                    loading: false,
                    height: "600px"
                }
            },
            created() {
                this.getTypeData()
            },
            mounted() {
                document.getElementById("scrolling-techniques-7").addEventListener("scroll", this.throttle(this
                    .handleScroll, 1000), true)
                this.height = window.screen.height

            },
            methods: {
                getTypeData: function () {
                    axios
                        .get('/temp/typeData/')
                        .then(response => {
                            this.typeList = response.data || []
                            if (this.typeList.length > 0) {
                                this.typeName = this.typeList[0].fields.type
                                this.getListData()
                            }
                        })
                        .catch(function (error) { // 请求失败处理
                            console.log(error);
                        });
                },
                changeType(typeName) {
                    console.log(this.type)
                    this.type = this.type == null ? 0 : this.type
                    this.typeName = typeName
                    this.page = 1;
                    this.result = []
                    this.getListData()
                },
                getListData: function () {
                    axios
                        .get('/temp/examDataByType/', {
                            params: {
                                type: this.typeName,
                                page: this.page
                            }
                        })
                        .then(response => {
                            this.result = [...this.result, ...response.data.pageData] || []
                            this.totalnum = response.data.totalnum;
                            this.loading = false;
                            this.page = this.page + 1 //显示页数新增
                        })
                        .catch(function (error) { // 请求失败处理
                            console.log(error);
                        });
                },
                handleScroll: function () {
                    let scrollTop = document.getElementById("scrolling-techniques-7").scrollTop,
                        clientHeight = document.getElementById("scrolling-techniques-7").clientHeight,
                        scrollHeight = document.getElementById("scrolling-techniques-7").scrollHeight,
                        height = 50; //根据项目实际定义
                    if (scrollTop + clientHeight >= scrollHeight - height) {
                        if (this.page >= this.totalnum) {
                            return false
                        } else {

                            this.getListData() //请求列表list 接口方法
                        }
                        /*显示加载效果*/
                        this.loading = true;
                        /* 效果 显示 时常 */
                    } else {
                        return false
                    }
                },
                throttle: function (func, wait) {
                    let lastTime = null
                    let timeout
                    return () => {
                        let context = this;
                        let now = new Date();
                        let arg = arguments;
                        if (now - lastTime - wait > 0) {
                            if (timeout) {
                                clearTimeout(timeout)
                                timeout = null
                            }
                            func.apply(context, arg)
                            lastTime = now
                        } else if (!timeout) {
                            timeout = setTimeout(() => {
                                func.apply(context, arg)
                            }, wait)
                        }
                    }
                }
            }
        })
    </script>

</body>

</html>